<script lang='ts' setup>
import { reactive, ref, nextTick } from 'vue'
import MicroServiceServiceApi from '/@/api/org/bean/micro-service'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
import MicroServiceFormDialog from './org-micro-service-form-dialog.vue'
const OrgMicroServiceTableRef = ref()
const microServiceFormDialogRef = ref()

const props = defineProps({
    fit: {
        type: String,
        default: 'full'
    },
    tableHeight: {
        type: String,
        default: '480px'
    }
})

const OrgMicroServiceListState = reactive({
    queryColumn: [
        { name: 'microServiceId', type: 'input', label: '模糊搜索', placeholder: '请输入ID/URL/名称' }
    ],
    queryForm: { microServiceId: '' },
    /**
     * 表格选中的数据
     */
    selectionData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "microServiceId", label: "微服务ID", width: "200", showOverflowTooltip: true, type: 'link',
            linkClick: (row: any) => {
                OrgMicroServiceListState.currentId = row.microServiceId
                OrgMicroServiceListState.formDialogVisible = true
            }
        },
        { prop: "microServiceName", label: "微服务名称", width: "200", showOverflowTooltip: true },
        { prop: "microServiceUrl", label: "微服务URL", showOverflowTooltip: true },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => MicroServiceServiceApi.queryPage(null, { ...params, ...OrgMicroServiceListState.queryForm }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => MicroServiceServiceApi.exportData(null, { ...params, ...OrgMicroServiceListState.queryForm }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[], pkList: string[]) => {
        OrgMicroServiceListState.selectionData = dataList
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        deletePageTableSelectionDataList(OrgMicroServiceTableRef, MicroServiceServiceApi)
    },
    /**
     * 新增按钮点击事件
     */
    onAddButtonClick: () => {
        OrgMicroServiceListState.currentId = ''
        OrgMicroServiceListState.formDialogVisible = true
    },
    /** 搜索点击事件 */
    onSearch: () => {
        nextTick(() => {
            OrgMicroServiceTableRef.value.loadTable()
        })
    },
    ///// 弹窗 start //////
    formDialogVisible: false,
    currentId: '',
    updateFormDialogVisible: (val: any) => {
        OrgMicroServiceListState.formDialogVisible = val
    },
    onSaveSuccess: () => {
        OrgMicroServiceTableRef.value.loadTable()
        OrgMicroServiceListState.formDialogVisible = false
        OrgMicroServiceListState.currentId = ''
    }
    ///// 弹窗 end //////
})

defineExpose({
    getOrgMicroServiceTableRef: () => OrgMicroServiceTableRef.value,
    getTableSelectionData: () => OrgMicroServiceListState.selectionData,
    onDeleteButtonClick: () => OrgMicroServiceListState.deleteTableData(),
    onAddButtonClick: () => OrgMicroServiceListState.onAddButtonClick()
})

</script>
<template>
    <jxtech-page-table
        ref="OrgMicroServiceTableRef"
        row-key="procId"
        :table-column="OrgMicroServiceListState.tableColumn"
        :load-data="OrgMicroServiceListState.loadData"
        :fit="fit"
        :table-height="tableHeight"
        @selection-change="OrgMicroServiceListState.tableSelectionChange"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <jxtech-search-form
                    :query-column="OrgMicroServiceListState.queryColumn"
                    :query-form="OrgMicroServiceListState.queryForm"
                    @handle-search="OrgMicroServiceListState.onSearch"
                    :col-span="12"
                ></jxtech-search-form>
            </div>
        </template>
    </jxtech-page-table>
    <micro-service-form-dialog
        ref="microServiceFormDialogRef"
        :visible="OrgMicroServiceListState.formDialogVisible"
        :micro-service-id="OrgMicroServiceListState.currentId"
        @update:visible="OrgMicroServiceListState.updateFormDialogVisible"
        @save-success="OrgMicroServiceListState.onSaveSuccess"
    ></micro-service-form-dialog>
</template>